 <template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <p>属性的形式访问值count:{{ testValue }}</p>
      <p>属性的形式访问值doneTodosCount: [{{ doneTodosCount }}]</p>
      <p>函数的形式访问值: [{{ getTodoById }}]</p>
      <p>
        mapGetters形式访问值count:{{ count }},doneTodos:{{ doneTodos[0].text }}
      </p>
      <p>mapGetters别名访问name: [{{ userName }}]</p>
      <button @click="testGetter">点击testGetter</button>
    </div>
  </div>
</template> 

<script>
import { mapGetters } from "vuex";
export default {
  name: "Test6",
  props: {
    msg: String,
  },
  data() {
    return {
      tempCount: 1,
      testValue: 0,
    };
  },
  computed: {
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    },
    getTodoById() {
      let todo = this.$store.getters.getTodoById(2);
      console.log(JSON.stringify(todo));
      return todo.text;
    },
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["count", "doneTodos"]),
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      userName: "name",
    }),
  },
  methods: {
    testGetter() {
      console.log("testGetter:" + this.$store.getters.count);
      this.testValue = this.$store.getters.count;
      console.log();
      let obj = this.$store.getters.doneTodos;
      console.log("testGetter:" + JSON.stringify(obj));
      console.log("testGetter:" + this.$store.getters.doneTodosCount);
      return this.testValue;
    },
  },
};
</script>
